<!DOCTYPE html>
<html  lang="zh">
<head>
    <!-- hexo-inject:begin --><!-- hexo-inject:end --><meta charset="utf-8" />

<meta name="generator" content="Hexo 3.9.0" />

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

<title>3D数学基础:图形与游戏开发-向量 - 游戏人生</title>


    <meta name="description" content="图形和游戏开发">
<meta name="keywords" content="学习">
<meta property="og:type" content="article">
<meta property="og:title" content="3D数学基础:图形与游戏开发-向量">
<meta property="og:url" content="http://cloundgame.gitee.io/mystudy/2019/08/19/study-game-image-1/index.html">
<meta property="og:site_name" content="游戏人生">
<meta property="og:description" content="图形和游戏开发">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="http://cloundgame.gitee.io/mystudy/images/og_image.png">
<meta property="og:updated_time" content="2019-09-03T11:48:14.076Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="3D数学基础:图形与游戏开发-向量">
<meta name="twitter:description" content="图形和游戏开发">
<meta name="twitter:image" content="http://cloundgame.gitee.io/mystudy/images/og_image.png">







<link rel="icon" href="/mystudy/images/favicon.svg">


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.7.2/css/bulma.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu:400,600|Source+Code+Pro">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/atom-one-dark.css">


    
    
    
    <style>body>.footer,body>.navbar,body>.section{opacity:0}</style>
    

    
    
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@1.6.8/dist/css/lightgallery.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/css/justifiedGallery.min.css">
    

    
    

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/outdatedbrowser@1.1.5/outdatedbrowser/outdatedbrowser.min.css">


    
    
    
    

<link rel="stylesheet" href="/mystudy/css/back-to-top.css">


    
    

    
    
    
    

    
    
<link rel="stylesheet" href="/mystudy/css/progressbar.css">
<script src="https://cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js"></script>

    
    
    
        <script async="" src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    

    


<link rel="stylesheet" href="/mystudy/css/style.css"><!-- hexo-inject:begin --><!-- hexo-inject:end -->
</head>
<body class="is-3-column">
    <!-- hexo-inject:begin --><!-- hexo-inject:end --><nav class="navbar navbar-main">
    <div class="container">
        <div class="navbar-brand is-flex-center">
            <a class="navbar-item navbar-logo" href="/mystudy/">
            
                <img src="/mystudy/images/logo.svg" alt="3D数学基础:图形与游戏开发-向量" height="28">
            
            </a>
        </div>
        <div class="navbar-menu">
            
            <div class="navbar-start">
                
                <a class="navbar-item"
                href="/mystudy/">主页</a>
                
                <a class="navbar-item"
                href="/mystudy/archives">日志</a>
                
                <a class="navbar-item"
                href="/mystudy/categories">分类</a>
                
                <a class="navbar-item"
                href="/mystudy/">关于</a>
                
            </div>
            
            <div class="navbar-end">
                
                    
                    
                    <a class="navbar-item" target="_blank" title="Download on GitHub" href="https://github.com/koliy/koliy.github.io">
                        
                        <i class="fab fa-github"></i>
                        
                    </a>
                    
                
                
                <a class="navbar-item is-hidden-tablet catalogue" title="目录" href="javascript:;">
                    <i class="fas fa-list-ul"></i>
                </a>
                
                
                <a class="navbar-item search" title="搜索" href="javascript:;">
                    <i class="fas fa-search"></i>
                </a>
                
            </div>
        </div>
    </div>
</nav>
    
    <section class="section">
        <div class="container">
            <div class="columns">
                <div class="column is-8-tablet is-8-desktop is-6-widescreen has-order-2 column-main"><div class="card">
    
    <div class="card-content article ">
        
        <div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto">
            <div class="level-left">
                <time class="level-item has-text-grey" datetime="2019-08-19T08:40:34.000Z">2019-08-19</time>
                
                <div class="level-item">
                <a class="has-link-grey -link" href="/mystudy/categories/3D数学基础-图形与游戏开发/">3D数学基础:图形与游戏开发</a>
                </div>
                
                
                <span class="level-item has-text-grey">
                    
                    
                    8 分钟 读完 (大约 1217 个字)
                </span>
                
                
                <span class="level-item has-text-grey" id="busuanzi_container_page_pv">
                    <i class="far fa-eye"></i>
                    <span id="busuanzi_value_page_pv">0</span>次访问
                </span>
                
            </div>
        </div>
        
        <h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal">
            
                3D数学基础:图形与游戏开发-向量
            
        </h1>
        <div class="content">
            <h3 id="向量"><a href="#向量" class="headerlink" title="向量"></a><strong>向量</strong></h3><p>向量有大小和方向。</p>
<p><strong>向量大小：</strong><br>$$ |v| = \sqrt{x^2+y^2} (对2D向量v) $$<br>$$ |v| = \sqrt{x^2+y^2+z^2} (对3D向量v) $$ </p>
<a id="more"></a>


<p><strong>标量和向量乘,除</strong><br>标量不能和向量相加，但可以相乘除，结果得到一个向量，与原向量平行，但长度不同或方向反向，<br><strong>标量不能除以向量，向量也不能除以另一个向量</strong><br>向量乘以标量k的效果是以因子k缩放向量的长度。</p>
<p>$ v =(x,y) $<br>$ v2 = kv = (kx,ky) $<br>$ v3 = \frac{v}{k} = \left(\frac{x}{k},\frac{y}{k}\right) $</p>
<p><strong>标准化向量</strong><br>对于许多向量，我们只关心它的方向而不关心其大小。如“我面向的是什么方向”,在这样的情况下，使用<em>单位向量</em><br>将非常方便。<br><strong>单位向量</strong>是大小为1的向量，单位向量经常被称为<strong>标准化向量</strong>或<strong>法线</strong><br>法线，是指始终垂直于某平面的虚线<br>$$<br>V_{norm} = \frac{V}{|V|}, V\ne 0<br>$$</p>
<p><strong>向量的加法和减法</strong><br>只有2个向量的维数相同，才能相加，相减。<br><strong>向量不能和标量，维数不同的向量相加减<br>和标量加法一样，向量加法满足交换律，但向量减法不满足交换律。永远有 $a+b=b+a$,但$a-b=-(b-a)$,仅当$a=b时，a-b=b-a$</strong></p>
<p>$$a+b=(x+x’,y+y’)$$</p>
<p><strong>几何解释</strong><br>向量a和b相加的几何解释：平移向量，使向量a的头连接向量b的尾，接着从a的尾向b的头画一个向量。<br>加法：a+b，a指向b，减法：a-b：b指向a<br><img src="math1.png" alt></p>
<p><strong>一个点到另一个点的向量</strong><br>使用三角形法则和向量减法解决。<br>为了计算a到b的向量，将点a和点b解释为从原点开始的向量，接着使用三角形法则：<br>b-a代表了从a到b的向量。</p>
<h3 id="距离公式"><a href="#距离公式" class="headerlink" title="距离公式"></a><strong>距离公式</strong></h3><p>用来计算2点之间的距离。<br>1.<strong>计算点a到点b的向量d</strong><br>$$d=b-a=(bx-ax,by-ay)$$<br>2.<strong>向量d的长度</strong><br>$$|d| = \sqrt{x^2+y^2}$$</p>
<h3 id="向量点乘"><a href="#向量点乘" class="headerlink" title="向量点乘"></a><strong>向量点乘</strong></h3><p>点乘等于向量大小与向量夹角的cos值的积,返回的是一个标量。</p>
<p><strong>几何解释</strong><br>点乘结果描述了2个向量的’相似’程度，点乘结果越大，2向量越相近。<br><em>点乘和向量间的夹角相关</em><br><img src="math2.png" alt></p>
<p><strong>在3D中，2向量的夹角是在包含2向量的平面中定义</strong></p>
<p>格式:  $a·b$<br>$$a·b =(xx’,yy’) = |a||b|\cos \theta$$<br>解得:<br>$$<br>\theta = \arccos\left(\frac{a·b}{|a||b|}\right)<br>$$<br>优化a，b为标准化向量，则a，b的大小为1.则公式简化为:<br>$$<br>\theta = \arccos\left(a·b\right)<br>$$</p>
<p><img src="math3.png" alt></p>
<h3 id="向量投影"><a href="#向量投影" class="headerlink" title="向量投影"></a><strong>向量投影</strong></h3><p>给定两个向量v和n，能将v分解为2个分量：V1和V2，它们分别平行于和垂直于n。并满足v=v1+v2,一般称平行分量v1为v在n上的投影。</p>
<p><img src="math4.png" alt></p>
<p>先计算V1，观察V1平行于n，根据等分比得出:向量n必须扩大k倍才能等于V1向量。<br>$$<br>V1=n\frac{|V1|}{|n|}<br>$$</p>
<p>因此只要求出V1的模大小，就能计算出V1的向量。<br>$$ \cos\theta=\frac{|V1|}{|v|}$$<br>代入上面|V1|:<br>$$<br>V1=n\frac{|v|\cos\theta}{|n|}<br>$$<br>根据点乘公式：$v·n = |v||n|\cos\theta$<br>$$<br>V1=n\frac{|v||n|\cos\theta}{|n|^2} = n\frac{v·n}{|n|^2}<br>$$</p>
<h3 id="向量叉乘"><a href="#向量叉乘" class="headerlink" title="向量叉乘"></a><strong>向量叉乘</strong></h3><p>仅应用于3D向量。和点乘不一样，点乘得到一个标量并满足交换律，向量叉乘得到一个向量并不满足交换律。</p>
<p>格式:  $ a \times b$</p>
<p>$$\begin{bmatrix} x_{1}\\y_{1}\\z_{1}\end{bmatrix}\times<br>\begin{bmatrix} x_{2}\\y_{2}\\z_{2}\end{bmatrix} =<br>\begin{bmatrix} y_{1}z_{2}-z_{1}y_{2}\\z_{1}x_{2}-x_{1}z_{2}\\x_{1}y_{2}-y_{1}x_{2}\end{bmatrix}<br>$$</p>
<p><strong>叉乘不满足交换律，也不满足结合律: $(a\times b)\times c\ne a\times(b\times c)$</strong></p>
<p><strong>几何解释</strong></p>
<p>叉乘得到的向量垂直于原来的两个向量：</p>
<p><img src="math5.png" alt></p>
<p>图中，向量a和b在一个平面中，向量$a\times b$ 指向该平面的正上方，垂直于a和b。</p>
<p>向量$a\times b$的长度等于向量的大小与向量夹角sin值的积：<br>$$\lVert a \times b\rVert = \lVert a\rVert  \lVert b\rVert\sin\theta$$</p>
<p>已经证明了$a\times b$垂直于a，b。但是垂直于a，b有2个方向，$a\times b$指向哪个方向了？<br>通过将a的头于b的尾相接，并检查从a到b是顺时针还是逆时针，确定axb的方向。<br>在左手坐标系中，顺时针，则$ a \times b$指向你，逆时针，则远离你。右手坐标系则相反。</p>

        </div>
        
        <div class="level is-size-7 is-uppercase">
            <div class="level-start">
                <div class="level-item">
                    <span class="is-size-6 has-text-grey has-mr-7">#</span>
                    <a class="has-link-grey -link" href="/mystudy/tags/学习/">学习</a>
                </div>
            </div>
        </div>
        
        

        
        <div class="social-share"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js@1.0.16/dist/css/share.min.css">
<script src="https://cdn.jsdelivr.net/npm/social-share.js@1.0.16/dist/js/social-share.min.js"></script>
        
    </div>
</div>





<div class="card card-transparent">
    <div class="level post-navigation is-flex-wrap is-mobile">
        
        <div class="level-start">
            <a class="level level-item has-link-grey  article-nav-prev" href="/mystudy/2019/08/19/shade学习-1/">
                <i class="level-item fas fa-chevron-left"></i>
                <span class="level-item">shader学习1-顶点/片元着色器的基本结构</span>
            </a>
        </div>
        
        
        <div class="level-end">
            <a class="level level-item has-link-grey  article-nav-next" href="/mystudy/2019/08/19/mmorpg-pomelo-unity-6/">
                <span class="level-item">mmorpg网络游戏学习5-行为树</span>
                <i class="level-item fas fa-chevron-right"></i>
            </a>
        </div>
        
    </div>
</div>


</div>
                




<div class="column is-4-tablet is-4-desktop is-3-widescreen  has-order-1 column-left ">
    
        
<div class="card widget">
    <div class="card-content">
        <nav class="level">
            <div class="level-item has-text-centered" style="flex-shrink: 1">
                <div>
                    
                        <img class="image is-128x128 has-mb-6" src="/mystudy/images/avatar2.jpg" alt="满头大汉老黄牛">
                    
                    
                    <p class="is-size-4 is-block">
                        满头大汉老黄牛
                    </p>
                    
                    
                    <p class="is-size-6 is-block">
                        游戏
                    </p>
                    
                    
                    <p class="is-size-6 is-flex is-flex-center has-text-grey">
                        <i class="fas fa-map-marker-alt has-mr-7"></i>
                        <span>火星</span>
                    </p>
                    
                </div>
            </div>
        </nav>
        <nav class="level is-mobile">
            <div class="level-item has-text-centered is-marginless">
                <div>
                    <p class="heading">
                        文章
                    </p>
                    <p class="title has-text-weight-normal">
                        70
                    </p>
                </div>
            </div>
            <div class="level-item has-text-centered is-marginless">
                <div>
                    <p class="heading">
                        分类
                    </p>
                    <p class="title has-text-weight-normal">
                        10
                    </p>
                </div>
            </div>
            <div class="level-item has-text-centered is-marginless">
                <div>
                    <p class="heading">
                        标签
                    </p>
                    <p class="title has-text-weight-normal">
                        3
                    </p>
                </div>
            </div>
        </nav>
        <div class="level">
            <a class="level-item button is-link is-rounded" href="https://github.com/koliy/" target="_blank">
                关注我</a>
        </div>
        
        
        <div class="level is-mobile">
            
            <a class="level-item button is-white is-marginless" target="_blank"
                title="Github" href="https://github.com/koliy/">
                
                <i class="fab fa-github"></i>
                
            </a>
            
        </div>
        
    </div>
</div>
    
        


    
        
<div class="card widget">
    <div class="card-content">
        <div class="menu">
            <h3 class="menu-label">
                分类
            </h3>
            <ul class="menu-list">
            <li>
        <a class="level is-marginless" href="/mystudy/categories/3D数学基础-图形与游戏开发/">
            <span class="level-start">
                <span class="level-item">3D数学基础:图形与游戏开发</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">3</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/AI/">
            <span class="level-start">
                <span class="level-item">AI</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">12</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/MySql/">
            <span class="level-start">
                <span class="level-item">MySql</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">1</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/SurfaceShader/">
            <span class="level-start">
                <span class="level-item">SurfaceShader</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">1</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/Unity/">
            <span class="level-start">
                <span class="level-item">Unity</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">1</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/git/">
            <span class="level-start">
                <span class="level-item">git</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">3</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/shade学习/">
            <span class="level-start">
                <span class="level-item">shade学习</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">33</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/xlua/">
            <span class="level-start">
                <span class="level-item">xlua</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">1</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/网络同步/">
            <span class="level-start">
                <span class="level-item">网络同步</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">10</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/设计模式/">
            <span class="level-start">
                <span class="level-item">设计模式</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">5</span>
            </span>
        </a></li>
            </ul>
        </div>
    </div>
</div>
    
        <div class="card widget">
    <div class="card-content">
        <div class="menu">
        <h3 class="menu-label">
            归档
        </h3>
        <ul class="menu-list">
        
        <li>
            <a class="level is-marginless" href="/mystudy/archives/2020/09/">
                <span class="level-start">
                    <span class="level-item">九月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">1</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/mystudy/archives/2020/07/">
                <span class="level-start">
                    <span class="level-item">七月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">23</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/mystudy/archives/2020/06/">
                <span class="level-start">
                    <span class="level-item">六月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">17</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/mystudy/archives/2020/03/">
                <span class="level-start">
                    <span class="level-item">三月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">2</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/mystudy/archives/2020/02/">
                <span class="level-start">
                    <span class="level-item">二月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">4</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/mystudy/archives/2019/09/">
                <span class="level-start">
                    <span class="level-item">九月 2019</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">5</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/mystudy/archives/2019/08/">
                <span class="level-start">
                    <span class="level-item">八月 2019</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">18</span>
                </span>
            </a>
        </li>
        
        </ul>
        </div>
    </div>
</div>
    
        
<div class="card widget">
    <div class="card-content">
        <h3 class="menu-label">
            标签云
        </h3>
        <a href="/mystudy/tags/game/" style="font-size: 15px;">game</a> <a href="/mystudy/tags/git/" style="font-size: 10px;">git</a> <a href="/mystudy/tags/学习/" style="font-size: 20px;">学习</a>
    </div>
</div>

    
    
        <div class="column-right-shadow is-hidden-widescreen is-sticky">
        
            
<div class="card widget" id="toc">
    <div class="card-content">
        <div class="menu">
            <h3 class="menu-label">
                目录
            </h3>
            <ul class="menu-list"><li>
        <a class="is-flex" href="#向量">
        <span class="has-mr-6">1</span>
        <span>向量</span>
        </a></li><li>
        <a class="is-flex" href="#距离公式">
        <span class="has-mr-6">2</span>
        <span>距离公式</span>
        </a></li><li>
        <a class="is-flex" href="#向量点乘">
        <span class="has-mr-6">3</span>
        <span>向量点乘</span>
        </a></li><li>
        <a class="is-flex" href="#向量投影">
        <span class="has-mr-6">4</span>
        <span>向量投影</span>
        </a></li><li>
        <a class="is-flex" href="#向量叉乘">
        <span class="has-mr-6">5</span>
        <span>向量叉乘</span>
        </a></li></ul>
        </div>
    </div>
</div>

        
        </div>
    
</div>

                




<div class="column is-4-tablet is-4-desktop is-3-widescreen is-hidden-touch is-hidden-desktop-only has-order-3 column-right is-sticky">
    
        
<div class="card widget" id="toc">
    <div class="card-content">
        <div class="menu">
            <h3 class="menu-label">
                目录
            </h3>
            <ul class="menu-list"><li>
        <a class="is-flex" href="#向量">
        <span class="has-mr-6">1</span>
        <span>向量</span>
        </a></li><li>
        <a class="is-flex" href="#距离公式">
        <span class="has-mr-6">2</span>
        <span>距离公式</span>
        </a></li><li>
        <a class="is-flex" href="#向量点乘">
        <span class="has-mr-6">3</span>
        <span>向量点乘</span>
        </a></li><li>
        <a class="is-flex" href="#向量投影">
        <span class="has-mr-6">4</span>
        <span>向量投影</span>
        </a></li><li>
        <a class="is-flex" href="#向量叉乘">
        <span class="has-mr-6">5</span>
        <span>向量叉乘</span>
        </a></li></ul>
        </div>
    </div>
</div>

    
    
</div>

            </div>
        </div>
    </section>
    <footer class="footer">
    <div class="container1">
        <div class="level1">
            <div class="level-start1 has-text-centered-mobile1">
                <a class="footer-logo is-block has-mb-6" href="/mystudy/">
                

                
                </a>
                <p class="is-size-7">
                &copy; 2020 Koliy&nbsp;
                Powered by <a href="https://github.com/koliy/koliy.github.io" target="_blank">Hexo</a> & <a
                        href="https://github.com/ppoffice/hexo-theme-icarus" target="_blank">Icarus</a>
                
                <br>
                <span id="busuanzi_container_site_uv">
                共<span id="busuanzi_value_site_uv">0</span>个访客
                </span>
                
                </p>
            </div>
            <div class="level-end1">
            
            </div>
        </div>
    </div>
</footer>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.22.2/min/moment-with-locales.min.js"></script>
<script>moment.locale("zh-CN");</script>

<script>
var IcarusThemeSettings = {
    article: {
        highlight: {
            clipboard: true,
            fold: 'unfolded'
        }
    }
};
</script>


    <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.4/dist/clipboard.min.js" defer></script>



    
    
    
    <script src="/mystudy/js/animation.js"></script>
    

    
    
    
    <script src="https://cdn.jsdelivr.net/npm/lightgallery@1.6.8/dist/js/lightgallery.min.js" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/js/jquery.justifiedGallery.min.js" defer></script>
    <script src="/mystudy/js/gallery.js" defer></script>
    

    
    

<div id="outdated">
    <h6>Your browser is out-of-date!</h6>
    <p>Update your browser to view this website correctly. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/">Update
            my browser now </a></p>
    <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/outdatedbrowser@1.1.5/outdatedbrowser/outdatedbrowser.min.js" defer></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        outdatedBrowser({
            bgColor: '#f25648',
            color: '#ffffff',
            lowerThan: 'flex'
        });
    });
</script>


    
    
<script src="https://cdn.jsdelivr.net/npm/mathjax@2.7.5/unpacked/MathJax.js?config=TeX-MML-AM_CHTML" defer></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    MathJax.Hub.Config({
        'HTML-CSS': {
            matchFontHeight: false
        },
        SVG: {
            matchFontHeight: false
        },
        CommonHTML: {
            matchFontHeight: false
        },
        tex2jax: {
            inlineMath: [
                ['$','$'],
                ['\\(','\\)']
            ]
        }
    });
});
</script>

    
    

<a id="back-to-top" title="回到顶端" href="javascript:;">
    <i class="fas fa-chevron-up"></i>
</a>
<script src="/mystudy/js/back-to-top.js" defer></script>


    
    

    
    
    
    

    
    
    
    
    

    


<script src="/mystudy/js/main.js" defer></script>

    
    <div class="searchbox ins-search">
    <div class="searchbox-container ins-search-container">
        <div class="searchbox-input-wrapper">
            <input type="text" class="searchbox-input ins-search-input" placeholder="想要查找什么..." />
            <span class="searchbox-close ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="searchbox-result-wrapper ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
    (function (window) {
        var INSIGHT_CONFIG = {
            TRANSLATION: {
                POSTS: '文章',
                PAGES: '页面',
                CATEGORIES: '分类',
                TAGS: '标签',
                UNTITLED: '(无标题)',
            },
            CONTENT_URL: '/mystudy/content.json',
        };
        window.INSIGHT_CONFIG = INSIGHT_CONFIG;
    })(window);
</script>
<script src="/mystudy/js/insight.js" defer></script>
<link rel="stylesheet" href="/mystudy/css/search.css">
<link rel="stylesheet" href="/mystudy/css/insight.css"><!-- hexo-inject:begin --><!-- Begin: Injected MathJax -->
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({"tex2jax":{"inlineMath":[["$","$"],["\\(","\\)"]],"skipTags":["script","noscript","style","textarea","pre","code"],"processEscapes":true},"TeX":{"equationNumbers":{"autoNumber":"AMS"}}});
</script>

<script type="text/x-mathjax-config">
  MathJax.Hub.Queue(function() {
    var all = MathJax.Hub.getAllJax(), i;
    for(i=0; i < all.length; i += 1) {
      all[i].SourceElement().parentNode.className += ' has-jax';
    }
  });
</script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js">
</script>
<!-- End: Injected MathJax -->
<!-- hexo-inject:end -->
    
</body>
</html>